<template>
  <popup :show.sync="show">
    <div class="book-form">
      <h2>报名信息<icon id="close" @click.native="hide"></icon></h2>
      <div class="cells">
        <label class="cell">
          <div class="cell-bd">
            <h3>标准房</h3>
            <div class="cell-bd-tip">6人间：古风装修</div>
          </div>
          <div class="cell-ft">
            <em class="price">358.00</em>
            <input type="radio" v-model="roomTypeId" value="1" class="checkbox">
          </div>
        </label>

        <label class="cell">
          <div class="cell-bd">
            <h3>大厅单座</h3>
            <div class="cell-bd-tip">单座：现代装修</div>
          </div>
          <div class="cell-ft">
            <em class="price">70.00</em>
            <input type="radio" v-model="roomTypeId" value="2" class="checkbox">
          </div>
        </label>

        <label class="cell">
          <div class="cell-bd">
            <h3>商务房</h3>
            <div class="cell-bd-tip">10人间：现代装修</div>
          </div>
          <div class="cell-ft">
            <em class="price">987.00</em>
            <input type="radio" v-model="roomTypeId" value="3" class="checkbox">
          </div>
        </label>
      </div>

      <a class="btn btn-primary" :disabled="!roomTypeId" @click="submit">提交</a>
    </div>
  </popup>
</template>

<script>
export default {
  data () {
    return {
      show: 0,
      roomTypeId: 0
    }
  },
  methods: {
    hide () {
      this.show = 0
    },
    submit () {
      const { roomTypeId } = this

      this.$emit('submit', { roomTypeId })
    }
  }
}
</script>

<style lang="scss" scoped>
.book-form {
  background: $bg;

  > h2 {
    margin: 0;
    line-height: 1;
    padding: 16px 10px 0;
    font-size: 16px;
    font-weight: 400;

    > .icon {
      float: right;
    }
  }

  >.btn {
    border: 0;
    border-radius: 0;
  }
}
</style>

